<template>
  <div class="appp" :style="{ overflow: 'auto' }">
    <!-- 返回按钮 -->
    <router-link tag="div" :to="{ name: 'home' }" class="returnn"
      >返回 ></router-link
    >
    <van-index-bar highlight-color="#830404" @change="change" sticky>
      <template v-for="(item, key) in dataList">
        <!-- 首字母 -->
        <van-index-anchor :index="key" class="van-index-anchor" :key="key" />
        <van-cell v-for="val in item" :key="val.cityId">
          <!-- 插槽 -->
          <template #title>
            <!-- icon图标 -->
            <van-icon name="like" color="#e4cd88" size="16" />
            <!-- 地名 -->
            <span @click="clickFn(val.name)" class="custom-title">{{
              val.name
            }}</span>
          </template>
        </van-cell>
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import Vue from "vue";
import { IndexBar, IndexAnchor, Cell, Icon } from "vant";

Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);
Vue.use(Icon);

export default {
  data() {
    return {
      show: true,
      dataList: [],
    };
  },
  async mounted() {
    //  console.log("jjjj",this.$store.state.city);
    let ret = await this.$api.getCitiesInfo();
    this.dataList = ret;
  },
  methods: {
    confirm(evt) {
      this.show = false;
    },
    clickFn(cityname) {
      this.$store.state.city = cityname;
      this.$router.push("/home");
    },
    change(evt) {},
  },
};
</script>

<style lang="scss" scoped>
.appp {
  position: relative;

  .returnn {
    position: fixed;
    top: 5px;
    right: 10px;
    font-size: 14px;
    color: #830404;
    z-index: 2;
  }
}
.custom-title {
  font-size: 17px;
}
</style>
